import React, { useEffect } from "react";
import MyHeader from "./components/MyHeader";
import Item from "./components/Item";
import { useDispatch, useSelector } from "react-redux";
import { RootState } from "./types/store";
import { saveTodo } from "./store/actions/todoList";
import { nanoid } from "nanoid";
import Model from "./components/model";
export default function App() {
  const dispatch = useDispatch();
  const { show } = useSelector((state: RootState) => state.todoList);
  useEffect(() => {
    if (!localStorage.getItem("todoList"))
      localStorage.setItem(
        "todoList",
        JSON.stringify([
          {
            id: nanoid(),
            content: "早上八点起床准备吃早饭然后上班",
            complete: false,
            time:Date.now()
          },
        ])
      );
    dispatch(saveTodo(JSON.parse(localStorage.getItem("todoList") as string)));
  }, [dispatch]);
  const { todos } = useSelector((state: RootState) => state.todoList);
  return (
    <div>
      {show ? <Model /> : ""}
      <MyHeader />
      {todos.map((item) => (
        <Item key={item.id} item={item} />
      ))}
    </div>
  );
}
